@charset "utf-8";
@import 'reset';
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}
html {
    font-size: $fontSize*1px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    font-size: 16px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.webWarp{
    height: 100%;
    position: relative;
}
.web {
    width: r(640);
    position: absolute;
    left: 0;
    top: 0;
    top: 0;
    bottom:r(100);
    overflow: auto;
    header {
        .nav {
            width: r(640);
            height: r(75);
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-around;
            li {
                position: relative;
                width: r(113);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            li::after {
                position: absolute;
                left: 0;
                bottom: - r(19);
                content: "";
                width: 100%;
                height: r(3);
                background: #000000;
                display: none;
            }
            li:hover::after {
                display: block;
            }
            .active::after{
                display: block;
            }
            a {
                display: flex;
                align-items: center;
            }
            img {
                height: r(37);
            }
        }
        
    }
    .container{
       width: r(640);
       margin-top: r(43);
       margin-bottom: r(90); 
       height: calc(100%-100px);
       .title{
           font-size: r(27);
           text-align: center;
       }
       ul{
           margin-top:r(22) ;
           margin-bottom: r(46);
           text-align: center;
           font-size: 0;
           li{
               display: inline-block;
               font-size: r(12);
               padding:r(8) r(30) r(9) r(29);
               background: #FFFFFF;
               a{
                   color: #dadada;
               }
           }
           .art{
               border: 1px solid #878787;
               border-right: none;
               border-radius:r(6) 0 0 r(6);
               
           }
           .mech{
               border: 1px solid #d0d0d0;
               border-left: none;
               border-radius:0  r(6) r(6) 0;
           }
           .n_active{
               background:#a6a6a6 ;
               a{
                   color: #FFFFFF;
               }
           }
       }
       .book{
           width:r(640);
           position: relative;
           margin-bottom:r(100) ;
            >ul{
                width: r(640);
                height: r(718);
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                font-size: 0;
                >li{
                    padding: 0;
                    display: flex;
                    align-items: flex-end;
                    .con_book{
                        width: 300px;
                    }
                }
                .banner_l{
                    width: r(74);
                    height: r(653);
                    overflow: hidden;
                    position: relative;
                    img{
                    height:100%;
                    position: absolute;
                    right: 0;
                    top: 0;
                    }
                }
                .banner_c{
                    width: r(467);
                    position: relative;
                    height: r(653);
                    overflow: hidden;
                    align-self: flex-start;
                    margin-left: r(10);
                    img{
                        position: absolute;
                        top: 0;
                        left: 0;
//                      height:r(653);
                        width: 100%;
                    }
                }
                .banner_r{
                    width: r(100);
                    height: r(653);
                    overflow: hidden;
                    position: relative;
                    img{
                    height:100%;
                    position: absolute;
                    left: -10px;
                    top: 0;
                    }
                }
            }
            .btn{
                position: absolute;
                left: 50%;
                bottom: - r(30);
                transform: translate(-50%);
                display: block;
                padding: r(9) r(56) r(10) r(49);
                border: 1px solid #D0D0D0;
                border-radius: 6px;
                color: #585858;
                font-size: r(27);
            } 
            .btn:hover{
                color:#525259;
            }
       }
    }
}
    footer{
        width: 100%;
    .foot_nav{
        width: r(640);
        position: absolute;
        left:50%;
        bottom:0;
        height: r(100);
        background: rgba(255,255,255,1);
        transform: translate(-50%);
        ul{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            li{
                display: flex;
                align-items: flex-end;
                a{
                    display: flex;
                    align-items: flex-end;  
                }
                img{
                    width:r(60);
                }
                .logo{
                    width: r(97);
                }
            }
            
            
        }
    }
}